<template>
  <a-card
    style="
      width: 100%;
      height: 100%;
      background: #1e1e20;
      border: 1px solid #1e1e20;
    "
  >
    <template #title><span style="color: #fff">视频大纲</span></template>
    <template #extra>
      <div class="left_con">
        <a-select
          v-model:value="videoForm.style"
          style="min-width: 80px"
          placeholder="语气"
        >
          <a-select-option v-for="item in styleList" :value="item">{{
            item
          }}</a-select-option>
        </a-select>
        <a-select
          style="margin-left: 10px; min-width: 80px"
          v-model:value="videoForm.freedom"
          placeholder="自由度"
        >
          <a-select-option v-for="item in freedomList" :value="item.value">{{
            item.label
          }}</a-select-option>
        </a-select>
      </div>
    </template>
    <div class="video_con">
      <a-textarea
        :maxLength="500"
        class="input_content"
        @blur="handleBlur"
        ref="inputRef"
        v-model:value="content"
        :placeholder="`这样写，效果更好哦（示例）
我的行业：美容
我的店名：小美医美
我要介绍的商品：水光针299元体验套餐
突出关键词：无需预约、十年老店、过期自动退`"
      />
      <div class="shortcut_con">
        <div class="shortcut_title">快速输入</div>
        <div
          @click="addDesc(item)"
          class="shortcut_item"
          v-for="(item, index) in shortcutList"
          :key="index"
        >
          {{ item }}
        </div>
      </div>
    </div>
  </a-card>
</template>

<script>
import { defineComponent, ref, reactive, toRefs, watch } from "vue";
import store from "../../../../../store";
export default defineComponent({
  setup(props, context) {
    const state = reactive({
      styleList: [
        "幽默",
        "接地气",
        "调侃",
        "八卦",
        "感性",
        "阳光",
        "理性客观",
        "豪放",
        "伤感",
        "友好",
        "高雅",
        "信任感",
      ],
      freedomList: [
        { value: "正常", label: "默认" },
        { value: "低", label: "低" },
        { value: "中", label: "中" },
        { value: "高", label: "高" },
      ],
      content: "",
      videoForm: {
        style: null,
        freedom: null,
        num: 1,
      },
      shortcutList: ["我的行业", "我的店名", "我要介绍的商品", "突出关键词"],
    });

    const inputRef = ref(null);

    const addDesc = (item) => {
      // 检查首行是否为空行
      if (state.content && state.content.slice(-1) !== "\n") {
        state.content += "\n" + item + "：";
      } else {
        state.content += item + "：";
      }

      inputRef.value?.focus();
      store.dispatch("SetAiComposeConfigData", {
        ai_data: { ...state.videoForm, content: state.content },
      });
    };

    const handleBlur = () => {
      store.dispatch("SetAiComposeConfigData", {
        ai_data: { ...state.videoForm, content: state.content },
      });
    };

    watch(
      () => state.videoForm,
      (val) => {
        store.dispatch("SetAiComposeConfigData", {
          ai_data: { content: state.content, ...val },
        });
      },
      {
        deep: true,
        immediate: true,
      }
    );

    watch(
      () => store.getters.clipJSON?.ai_compose_config?.ai_data,
      (val) => {
        if (val) {
          state.videoForm.freedom = val?.freedom;
          state.videoForm.style = val?.style;
          state.content = val?.content;
        }
      },
      {
        deep: true,
        immediate: true,
      }
    );
    return {
      ...toRefs(state),
      handleBlur,
      addDesc,
      inputRef,
    };
  },
});
</script>

<style lang="less" scoped>
:deep(.ss-card-head) {
  border-bottom: 1px solid #000 !important;
  flex-shrink: 0;
  height: 45px;

  .ss-card-head-title {
    padding: 8px 0;
  }

  .ss-card-extra {
    padding: 8px 0;
  }
}
:deep(.ss-card-body) {
  height: 100%;
}

:deep(.ss-input-number-handler-wrap) {
  background-color: #666 !important;
}

:deep(.ss-select .ss-select-selector) {
  background-color: #333 !important;
  color: #fff !important;
  border: none !important;

  &:hover {
    border: none !important;
    box-shadow: none !important;
  }

  &:focus {
    border: none !important;
  }

  &:focus-within {
    border: none !important;
  }
}

:deep(.ss-select-arrow) {
  color: #fff !important;
}

:deep(.ss-select-selection-item) {
  background-color: #333;
  color: #fff;
}

.left_con {
  display: flex;
  align-items: center;
}

.video_con {
  height: 100%;
  .shortcut_con {
    height: 75px;
    width: 100%;
    display: flex;
    align-items: center;
    color: #ffffffd1;
    font-size: 12px;

    .shortcut_item {
      color: #ffffffd1;
      border: 1px solid rgba(255, 255, 255, 0.24);
      border-radius: 2px;
      margin-left: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 2px 10px;
      cursor: pointer;
    }
  }
  .input_content {
    background-color: rgba(255, 255, 255, 0.1);
    border: none;
    color: #eee;
    height: calc(100% - 95px);
    display: block;
    resize: none;
    border: 1px solid transparent;
    border-radius: 6px;
    transition: all 0.3s;

    &:hover {
      border: 1px solid rgba(255, 101, 98, 0.8);
    }
    &:focus {
      border: 1px solid rgba(255, 101, 98, 0.8);
      background: rgba(255, 101, 98, 0.1) !important;
    }
  }
}
</style>
